<template>
    <div v-if="isShow" class="content-box-row">
        <div class="content-box-row-content">
            <span class="name">{{optName}}<span class="rule">:</span></span>
            <span :class="isShowTwoRow ? 'two-row' : 'one-row'" class="val">{{text}}</span>
        </div>
        <div class="img-list" v-if="isShowImgList">
            <van-row gutter="20" class="img-list">
                <van-col 
                span="8" 
                v-for="(item, index) in imgList" 
                :key="index">
                    <image-vant 
                    :width="imgSty.width" 
                    :height="imgSty.height" 
                    :src="item" 
                    class="img-list-item"
                    @click.stop.native="clickImg(item)"
                    :key="index" />
                </van-col>
            </van-row>
        </div>
    </div>
</template>

<script>
// 自定义组件
import ImageVant from "_components/project/common/ImageVant"

// 自定义方法
import { getImgSrc, getText } from '_commonFn/string'
import { previewImgVant } from "_projectFn/images"

import Vue from 'vue'
import { Col, Row } from 'vant'

Vue.use(Col)
Vue.use(Row)

export default {
    name: 'UserInfoOption',
    props: {
        selectionId: {
            type: String,
            default: ''
        },
        optName: {
            type: String,
            default: ''
        },
        optId: {
            type: String,
            default: ''
        },
        optVal: {
            type: String,
            default: ''
        },
    },
    data() {
        return {
            imgList: this.setImgListLength(getImgSrc(this.optVal)),
            memberShowList: ['signature', 'area', 'company', 'yourSelf', 'supply',],
            demandShowList: ['area', 'demand', 'company'],
            helpShowList: ['area', 'company', 'find', 'myHelp'],
            imgSty: {
                width: 100,
                height: 100,
            },
            text: getText(this.optVal),
        }
    },
    methods: {
        clickImg(img) {
            if (img) {
                previewImgVant({img, imgList: this.imgList})
            }
        },
        setImgListLength(arr) {
            if (arr.length > 3) {
                arr.length = 3
            }
            return arr
        }
    },
    computed: {
        isShowTwoRow() {
            if (this.selectionId === 'member' && this.optId === 'supply') {
                return true
            } else if (this.selectionId === 'demand' && this.optId === 'demand') {
                return true
            } else if (this.selectionId === 'help' && (this.optId === 'find' || this.optId === 'myHelp')) {
                return true
            }
            return false
        },
        isShowImgList() {
            if (this.imgList.length === 0) return false
            return this.isShowTwoRow
        },
        isShow() {
            if (this.optName && this.text) {
                // console.log('选项 ID', this.selectionId )
                // console.log('填写项目 ID', this.optId)
                let showList
                if (this.selectionId === 'demand') {
                    showList = this.demandShowList
                } else if (this.selectionId === 'help') {
                    showList = this.helpShowList
                } else {
                    showList = this.memberShowList
                }
                if (showList.indexOf(this.optId) > -1) {
                    return true
                }
                return false
            }
            return false
        },
    },
    components: {
        ImageVant,
    }
}
</script>

<style lang="scss" scoped>
.content-box-row {
    &:not(:last-child) {
        margin-bottom: 5px;
    }
    
    .content-box-row-content {
        line-height: 20px;
        width: 100%;
        display: flex;

        .name {
            flex-shrink: 0;
            color: #999999;

            .rule {
                margin: 0 3px;
            }
        }

        .val {
            width: 100%;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            box-orient: vertical;
            overflow: hidden;
        }

        .one-row {
            -webkit-line-clamp: 1;
            line-clamp: 1;
        }

        .two-row {
            -webkit-line-clamp: 2;
            line-clamp: 2;
        }
    }
    
    .img-list {
        width: 100%;
        height: 100%;
        margin-top: 10px;
    }
}
</style>